<template>
    <div class="home">
        <!--轮播图-->
        <div class="block">
            <el-carousel height="460px">
                <el-carousel-item v-for="item in carousel" :key="item.carousel_id">
                    <img height="460px" :src="$target+item.imgPath" :alt="item.describes">
                </el-carousel-item>
            </el-carousel>
        </div>
        <!--商品列表区域-->
        <div class="main-box">
            <div class="main">
                <!-- 手机商品展示区域 -->
                <div class="phone">
                    <div class="box-hd">
                        <div class="title">手机</div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <router-link to="">
                                <img :src="$target+'public/imgs/phone/phone.png'" alt="">
                            </router-link>
                        </div>
                        <div class="list">
                            <goods-list :isMore="true" :goodsData="phoneList"></goods-list>
                        </div>
                    </div>
                </div>
<!--                家电商品展示区域-->
                <div class="appliance">
                    <div class="box-hd">
                        <div class="title">家电</div>
                        <div class="more">
                            <div class="myMenu">
                                <ul>
                                    <li @mouseover="applianceMouseOver(1)" :class="applianceActive === 1?'active':''">热门</li>
                                    <li @mouseover="applianceMouseOver(2)" :class="applianceActive === 2?'active':''">电视</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target+'public/imgs/appliance/appliance-promo1.png'" alt="">
                                </li>
                                <li>
                                    <img :src="$target+'public/imgs/appliance/appliance-promo2.png'" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <goods-list :isMore="true" :goodsData="applianceList"></goods-list>
                        </div>
                    </div>
                </div>
                <!--                配件商品展示区域-->
                <div class="parts">
                    <div class="box-hd">
                        <div class="title">配件</div>
                        <div class="more">
                            <ul class="myMenu">
                                <li :class="partsActive===1?'active':''" @mouseover="partsMouseOver(1)">热门</li>
                                <li :class="partsActive===2?'active':''" @mouseover="partsMouseOver(2)">保护套</li>
                                <li :class="partsActive===3?'active':''" @mouseover="partsMouseOver(3)">充电器</li>
                            </ul>
                        </div>
                    </div>
                    <div class="box-bd">
                        <div class="promo-list">
                            <ul>
                                <li>
                                    <img :src="$target+'public/imgs/accessory/accessory-promo1.png'" alt="">
                                </li>
                                <li>
                                    <img :src="$target+'public/imgs/accessory/accessory-promo2.png'" alt="">
                                </li>
                            </ul>
                        </div>
                        <div class="list">
                            <goods-list :isMore="true" :goodsData="partsList.length? partsList : partsHotList"></goods-list>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import homeApi from "../request/api/homoAPI"
export default {
    name: 'Home',
    components: {},
    created(){
        //轮播图数据获取
        this.getCarousel();
        //获取手机商品数据
        this.getProduct("phoneList",{"categoryName":"手机"});
        //获取手机商品数据
        this.getProduct("TVList",{"categoryName":"电视机"});
        //获取手机商品数据
        this.getProduct("coverList",{"categoryName":"保护套"});
        //获取手机商品数据
        this.getProduct("chargerList",{"categoryName":"充电器"});
        //获取家电热门数据
        this.getHotProduct("applianceHotList", {"categoryName":["电视机", "空调", "洗衣机"]})
        //获取配件热门数据
        this.getHotProduct("partsHotList",{"categoryName":["保护套", "保护膜", "充电器", "充电宝"]});

        // console.log("......",this.applianceList)
    },
    data(){
        return {
            carousel: [],//轮播图数据
            phoneList: [],//手机列表数据
            TVList: [],//电视机列表数据
            coverList: [],//保护套列表数据
            chargerList: [],//充电器列表数据
            applianceHotList: [], //家电热门数据
            partsHotList: [], //配件热门数据

            applianceList: [],//渲染家电页面所用的数据
            applianceActive: 1,//当前选择的分类标识 1:家电热门 2电视机
            partsList: [],//渲染家电页面所用的数据
            partsActive: 1,//当前选择的分类标识 1:配件热门 2保护套 3充电器
        }
    },
    watch:{
        //监听家电热门切换
        applianceActive(val){
            console.log("hello word",val);
            //通过不同的切换的值 来去修改页面渲染所用的数据源
            this.applianceList = val === 1?this.applianceHotList:this.TVList
        },
        //监听家电热门切换
        partsActive(val){
            console.log("hello word",val);
            //通过不同的切换的值 来去修改页面渲染所用的数据源
            switch (val){
                case 1://配件热门
                    this.partsList = this.partsHotList
                    break
                case 2://保护套
                    this.partsList = this.coverList
                    break
                case 3://充电器
                    this.partsList = this.chargerList
                    break
            }



        }
    },
    methods: {
        //获取轮播图数据
        async getCarousel(){
            let {data: res} = await homeApi.getCarousel();
            this.carousel = res.carousel;
        },
        //获取普通商品数据
        async getProduct(dataListName, data){
            let {data: res} = await homeApi.getPromoProduct(data);
            this[dataListName] = res.Product;
        },

        //获取热门商品数据
        async getHotProduct(dataListName, data){
            let {data: res} = await homeApi.getHotProduct(data);
            this[dataListName] = res.Product;
            if(dataListName === "applianceHotList"){
                //给渲染页面用的数据源赋初始值
                this.applianceList = this.applianceHotList;
            }
        },

        //切换家电热门或者电视机
        applianceMouseOver(num){
            this.applianceActive = num;
        },
        //切换配件热门或者保护套或者充电器
        partsMouseOver(num){
            this.partsActive = num;
        }
    }
}
</script>
<style type="text/scss" lang="scss">

.main-box {
    background-color: #f5f5f5;
    padding-bottom: 20px;
}

.main {
    margin: 0 auto;
    max-width: 1225px;
}

/* 轮播图CSS */
.block {
    margin: 0 auto;
    max-width: 1225px;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

/* 轮播图CSS END */

.box-hd {
    height: 58px;
    margin: 20px 0 0 0;
    .title {
        float: left;
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
    }
    .more {
        float: right;
        a {
            font-size: 16px;
            line-height: 58px;
            color: #424242;
            &:hover {
                color: #ff6700;
            }
        }
        .myMenu li {
            float: left;
            margin-left: 30px;
            &.active, &:hover {
                color: #ff6700;
                border-bottom: 2px solid #ff6700;
            }
        }
    }
}

.box-bd {
    height: 615px;
    .promo-list {
        float: left;
        height: 615px;
        width: 234px;
        li {
            z-index: 1;
            width: 234px;
            height: 300px;
            margin-bottom: 14.5px;
            -webkit-transition: all 0.2s linear;
            transition: all 0.2s linear;
            &:hover {
                z-index: 2;
                -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
                -webkit-transform: translate3d(0, -2px, 0);
                transform: translate3d(0, -2px, 0);
            }
            img {
                width: 234px;
                height: 300px;
            }
        }
        img {
            width: 234px;
        }
    }
    .list {
        float: left;
        height: 615px;
        width: 991px;
    }
}
</style>
